<template>
  <div class="hello">
  	<!--头部-->
			<el-menu
			  :default-active="activeIndex2"
			  class="el-menu-demo"
			  mode="horizontal"
			  @select="handleSelect"
			  background-color="#545c64"
			  text-color="#fff"
			  active-text-color="#ffd04b">
			  
			  <el-radio-group v-model="isCollapse" style="margin-left:10px;" >
			    <el-radio-button :label="true" ><i class="el-icon-s-fold"></i></el-radio-button>
			    <el-radio-button :label="false"><i class="el-icon-s-unfold"></i></el-radio-button>
				</el-radio-group>
				
			  <span class="headbox" index="1">放logo图</span>
			  <span class="headbox" index="1">青年军管理平台</span>
			  <span class="searchbox"><input placeholder="搜索活动" /></span>
			  
			  <el-menu-item index="1">退出</el-menu-item>
			  
			  <el-menu-item index="3" >消息中心</el-menu-item>
			  <el-menu-item index="4">个人中心</el-menu-item>
				
			</el-menu>
			
			<!--侧边栏和中间的内容-->
			<el-container style="margin-top:61px;" >
			  <!--<el-aside width="250px" style="background-color: fff;border: 1px solid #eee;">-->
			    <div class="leftaside">
			    <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
			      <router-link to="/home">
				      <el-submenu index="0">
				        <template slot="title"><i class="el-icon-s-home"></i>首页</template>
				      </el-submenu>
			      </router-link>
			      
			      <el-submenu index="1">
			        <template slot="title"><i class="el-icon-s-check"></i>考勤</template>
			        <el-menu-item-group >
			        	<router-link to="/signin">
			          	<el-menu-item index="1-1">签到</el-menu-item>
			          </router-link>
			          <router-link to="/leave">
			          <el-menu-item index="1-2">请假</el-menu-item>
			          </router-link>
			          <router-link to="/auditing2">
			          <el-menu-item index="1-3">审核</el-menu-item>
			          </router-link>
			        </el-menu-item-group>
			      </el-submenu>
			      
			       <el-submenu index="2">
			        <template slot="title"><i class="el-icon-mic"></i>活动
			        </template>
			        <el-menu-item-group>
			        	<router-link to="/activity">
			          	<el-menu-item index="2-4">所有活动</el-menu-item>
			          </router-link>
			        	<router-link to="/nowActivity">
			          	<el-menu-item index="2-1">进行中</el-menu-item>
			         </router-link>
				         <router-link to='/finishActivity'>
				         	 <el-menu-item index="2-2">已结束</el-menu-item>
				         </router-link>
			         	<router-link to='/myActivity'>
			         		<el-menu-item index="2-3">我的参与</el-menu-item>
			         	</router-link>			           
			        </el-menu-item-group>
			      </el-submenu>
			      
			      <el-submenu index="3">
			        <template slot="title"><i class="el-icon-house"></i>资源</template>
			        <el-menu-item-group>
			        	<router-link to="/resourceApplication">
			          	<el-menu-item index="3-1">资源申请</el-menu-item>
			          </router-link>
			          <router-link to="/applicationSituation">
			          	<el-menu-item index="3-2">申请情况</el-menu-item>
			          </router-link>
			        </el-menu-item-group>
			      </el-submenu>
			      
			      <el-submenu index="4">
			        <template slot="title"><i class="el-icon-key"></i>权限</template>
			        <el-menu-item-group>
			          <el-menu-item index="4-1">账户权限</el-menu-item>
			          <el-menu-item index="4-2">角色权限</el-menu-item>
			        </el-menu-item-group>
			      </el-submenu>
			      
			      <el-submenu index="5">
			        <template slot="title"><i class="el-icon-present"></i>积分</template>
			        <el-menu-item-group>
			          <el-menu-item index="5-1">本周积分</el-menu-item>
			          <el-menu-item index="5-2">历史积分</el-menu-item>
			        </el-menu-item-group>
			      </el-submenu>
			      
			      <el-submenu index="6">
			        <template slot="title"><i class="el-icon-s-custom"></i>小组</template>
			        <el-menu-item-group>
			        	<router-link to="/divide">
			          	<el-menu-item index="6-1">查看组别</el-menu-item>
			          </router-link>
			          <el-menu-item index="6-2" @click="goTodo">todo</el-menu-item>
			          <router-link to="rank">
			          	<el-menu-item index="6-3">小组排名</el-menu-item>
			          </router-link>
			          <router-link to="evaluate360">
			          	<el-menu-item index="6-4">360°评价</el-menu-item>
			          </router-link>
			        </el-menu-item-group>
			      </el-submenu>
			      
			      
			      <el-submenu index="7">
			        <template slot="title"><i class="el-icon-data-analysis"></i>OKR</template>
			        <el-menu-item-group>
			          <el-menu-item index="7-1">OKR展示</el-menu-item>
			          <el-menu-item index="7-2">OKR管理</el-menu-item>
			        </el-menu-item-group>
			      </el-submenu>
			      
			      <router-link to="/personal">
				      <el-submenu index="8" class="el-submenu">
				        	<template slot="title"><i class="el-icon-user"></i>个人信息</template>
				      </el-submenu>
			       </router-link>
			    </el-menu>
			  	</div>
			  <div class="righta">
			  	<router-view></router-view>
			  </div>
			</el-container>
			
  </div>
  
  
  
</template>

<script>
export default {
    data() {
    	return {
        activeIndex2: '1',
        isCollapse: false
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
       handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      goTodo(){
      	this.$router.push({path:'/todo'});
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	/*头部的样式*/
	.el-menu-demo{
		width: 100%;
		height: auto;
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 5;
	}
	.el-menu--horizontal>.el-menu-item{
		float: right!important;
	}
	.headbox{
		color: white;
		line-height: 60px;
		padding-left: 50px;
	}
	
	.searchbox input{
		margin-left: 20px;
		padding-left: 10px;
		height: 25px;
		border-radius: 2rem;
		border: none;
		outline: none;
	}

	/*侧边栏和中间的样式*/
	/*侧边栏收缩*/
	/deep/ .el-menu-vertical-demo[data-v-1eacecb2]:not(.el-menu--collapse){
		width: 148px;
	}
	.leftaside{
		height: 90%;
		overflow-y: scroll;
		position: fixed;
		left: 0;
	}
	.leftaside::-webkit-scrollbar{
		width: 0px;
	}
	.righta{
		width: 100%;
		margin-left:148px;
		box-sizing: border-box;
	}
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
    background-color: #fff;
    border-right: 1px solid #e5e5e5;
  }
  .el-menu{
  	background-color: #fff;
  	overflow:hidden;
    border-right: 0px;
  }
  .el-menu--collapse{
  	width:40px;
  }
 
	.el-radio-group /deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
	    color: #FFF;
	    background-color: transparent;
	    border:0px;
	    width:20px;
	    text-align:center;
	    padding:0px;
	    box-shadow: 0 0 0 0 #409EFF;
	}
	.el-radio-group /deep/ .el-radio-button__inner {
	    white-space: nowrap;
	    background: transparent;
	    font-weight: 500;
	    border: 0px;
	    color: #FFF;
	    width:-10px;
	    padding:0px;
	    text-align:center;
	}
	.el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
  a{
  	text-decoration: none;
  }
  .el-submenu a{
  	color: black!important;
  }
</style>
